<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/datetime_utils.js"></script>

</head>
<body>

<div id="div1" >

    <div>{{msg}}</div>
    <button @click="update">更新</button>
    <button @click="destory">vue对象销毁（从内从中释放）</button>

</div>
<script>
    /*
    *   观察并且了解：Vue对象的生命周期是什么样的。
    *
    * */

    const vueObj = new Vue({
        el: '#div1',
        data: {
            msg: "迪迦",

        },
        methods: {
            update: function () {
                console.log("跟新数据");
                this.msg = 'lifecycle';
            },

            destory: function () {
                //让vueObj对象被销毁，从内从中释放掉
                console.log("销毁Vue对象");
                this.$destroy();
            },
        },
        beforeCreate: function () {
            console.log("beforeCreate：vueObj创建之前会执行的方法");
        },
        created: function () {
            console.log("created：vueObj创建成功会执行的方法");
        },
        beforeMount: function () {
            console.log("beforeMount：vueObj在模板渲染成html之前会调用");
        },
        mounted: function () {
            console.log("mounted： 在模板渲染成html之后调用，也就是页面初始化完成之后");
        },
        beforeUpdate : function () {
            console.log("beforeUpdate：在update之前会调用")
        },
        updated: function () {
            console.log("updated：在update之后会调用");
        },
        beforeDestroy: function () {
            console.log("beforeDestroy :vueObj销毁之前会调用");
        },
        destroyed: function () {
            console.log("destroyed :vueObj销毁之前会调用");
        },



    });



</script>
</body>
</html>